<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>监控视频页面</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }
        video {
            width: 80%;
            max-width: 600px;
            border: 1px solid #ccc;
            margin-bottom: 20px;
        }
        table {
            width: 80%;
            max-width: 600px;
            margin: 0 auto;
            border-collapse: collapse;
        }
        table, th, td {
            border: 1px solid #ccc;
        }
        th, td {
            padding: 10px;
            text-align: left;
        }
    </style>
</head>
<body>

<video id="monitorVideo" controls autoplay>
    <source id="videoSource" src="" type="video/mp4">
    您的浏览器不支持HTML5视频标签。
</video>

<table id="monitorTable">
    <thead>
        <tr>
            <th>监控名称</th>
            <th>开始时间</th>
            <th>停止时间</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td id="monitorName">监控摄像头1</td>
            <td id="startTime">08:00:00</td>
            <td id="endTime">10:00:00</td>
        </tr>
    </tbody>
</table>

<script>
    // 假设我们从某个接口获取了数据
    const apiData = {
        "Code": 200,
        "Message": "获取成功",
        "Data": [
            { "IndexCode": "10", "Name": "Camera 10", "Path": "videos/(2)浮煤堆积/MyVideo_煤量堆积-30207工作面.mp4", "StartDate": "2024/10/31 23:28:45", "EndTime": "2024/10/31 23:28:48" },
            { "IndexCode": "4", "Name": "Camera 4", "Path": "videos/(5)涌水增加异常/MyVideo_涌水增加异常-21108运输巷1300米.mp4", "StartDate": "2024/10/31 23:28:40", "EndTime": "2024/10/31 23:28:43" },
            // 其他数据项...
        ]
    };

    // 假设我们有一个indexcode
    const indexCode = "10"; // 你需要根据实际情况更改这个值

    // 从apiData中匹配indexcode对应的数据
    const matchedData = apiData.Data.find(item => item.IndexCode === indexCode);

    if (matchedData) {
        // 更新视频源
        $('#videoSource').attr('src', matchedData.Path);
        $('#monitorVideo').get(0).load(); // 重新加载视频

        // 更新表格数据
        $('#monitorName').text(matchedData.Name);
        $('#startTime').text(matchedData.StartDate);
        $('#endTime').text(matchedData.EndTime);
    } else {
        console.error('未找到匹配的监控数据');
    }
</script>

</body>
</html>